<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f2f6fc;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .password-container {
            width: 600px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .password-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #1e88e5, #0d47a1);
        }

        .password-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .password-header h3 {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .password-header p {
            color: #666;
            font-size: 14px;
        }

        .password-form .layui-form-item {
            margin-bottom: 25px;
        }

        .password-form .layui-form-label {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            width: 120px;
            text-align: right;
            padding: 9px 15px;
        }

        .password-form .layui-input-block {
            margin-left: 120px;
        }

        .password-form .layui-input {
            height: 42px;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            padding-left: 15px;
            font-size: 15px;
            transition: all 0.3s;
        }

        .password-form .layui-input:focus {
            border-color: #1e88e5;
            box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.2);
        }

        .password-form .layui-form-mid {
            padding-top: 4px;
            color: #f56c6c;
        }

        .btn-group {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 20px;
        }

        .btn-submit, .btn-reset {
            width: 120px;
            height: 42px;
            font-size: 16px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .btn-submit {
            background-color: #1e88e5;
        }

        .btn-submit:hover {
            background-color: #1976d2;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(30, 136, 229, 0.3);
        }

        .btn-reset {
            background-color: #f0f2f5;
            color: #666;
        }

        .btn-reset:hover {
            background-color: #e6e9ed;
            transform: translateY(-2px);
        }

        .password-tips {
            background-color: #f0f7ff;
            border-left: 4px solid #1e88e5;
            padding: 12px 15px;
            border-radius: 4px;
            margin-top: 30px;
            font-size: 14px;
            color: #555;
        }

        .password-tips h4 {
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }

        .password-tips ul {
            padding-left: 20px;
        }

        .password-tips li {
            margin-bottom: 5px;
        }

        .password-footer {
            text-align: center;
            margin-top: 30px;
            color: #999;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .password-container {
                width: 90%;
                padding: 30px 20px;
            }

            .password-form .layui-form-label {
                width: 100%;
                text-align: left;
            }

            .password-form .layui-input-block {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
<div class="password-container">
    <div class="password-header">
        <h3>修改你的密码</h3>
        <p>请设置一个安全且容易记住的密码</p>
    </div>

    <form class="layui-form password-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" placeholder="请输入新密码"
                       autocomplete="off" class="layui-input" lay-verify="required|pass">
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" id="confirmPassword"
                       placeholder="请再次输入新密码" autocomplete="off" class="layui-input"
                       lay-verify="required|confirmPass">
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
        </div>

        <div class="btn-group">
            <button class="layui-btn btn-submit" lay-submit lay-filter="formSubmit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary btn-reset">重置</button>
        </div>
    </form>

    <div class="password-tips">
        <h4>密码安全提示：</h4>
        <ul>
            <li>密码长度至少8个字符</li>
            <li>使用字母、数字和特殊符号组合</li>
            <li>避免使用生日、姓名等容易被猜到的密码</li>
            <li>不要使用与其他网站相同的密码</li>
        </ul>
    </div>

    <div class="password-footer">
        在线考试系统 &copy; 2023 版权所有
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,20}$/,
                '密码长度需在6-20位之间，且不能包含空格'
            ],
            confirmPass: function(value) {
                var password = document.getElementById('password').value;
                if (value !== password) {
                    return '两次输入的密码不一致！';
                }
            }
        });

        // 监听提交
        form.on('submit(formSubmit)', function(data){
            // 模拟从cookie获取学生ID
            var studentId = 'S20230001'; // 实际应从cookie获取

            // 显示加载层
            var loadIndex = layer.load(0, {shade: [0.3, '#fff']});

            // 模拟AJAX请求
            setTimeout(function() {
                layer.close(loadIndex);

                // 模拟成功响应
                layer.msg('密码修改成功！', {
                    icon: 1,
                    time: 2000,
                    end: function() {
                        // 重置表单
                        document.getElementById('password').value = '';
                        document.getElementById('confirmPassword').value = '';
                    }
                });
            }, 1500);

            /* 实际AJAX请求代码
            $.ajax({
                url: '/api/studentPWD',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify({
                    pwd: data.field.password,
                    studentId: studentId
                }),
                success: function(res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg('密码修改成功！', {icon: 1, time: 2000});
                    } else {
                        layer.msg('修改失败：' + res.message, {icon: 2});
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg('请求失败，请稍后重试', {icon: 2});
                }
            });
            */

            return false; // 阻止表单跳转
        });

        // 监听重置按钮
        document.querySelector('.btn-reset').addEventListener('click', function() {
            document.getElementById('password').value = '';
            document.getElementById('confirmPassword').value = '';
            // 清除验证提示
            document.querySelectorAll('.layui-form-mid').forEach(function(el) {
                el.textContent = '';
            });
        });
    });
</script>
</body>
</html>